<template>
  <el-card shadow="never"
           style="height: 553px;overflow: auto;">
    <div slot="header"
         class="clearfix">
      <div class=" flex-between ">
        <div class="flex">
          <div class="line"></div>
          <div class="fontSize16"
               style="font-weight: 700;">支付方式统计 </div>
        </div>
        <div>
          <el-radio-group v-model="radio1"
                          @input="change">
            <el-radio-button label="商城消费"></el-radio-button>
            <el-radio-button label="套餐卡消费"></el-radio-button>

          </el-radio-group>
        </div>
      </div>

    </div>

    <div class="padding30">
      <div class="ele-cell"
           v-if="yhtjIncomeList?.weixin">
        <div style="width: 50px; white-space: nowrap"
             class="ele-text-secondary">
          <span class="classificationName font-overflow">{{ '微信' }}</span>
        </div>
        <div class="ele-cell-content">

          <el-progress :percentage="yhtjIncomeList?.weixin.proportion"
                       :stroke-width="26"
                       :text-inside="true"
                       :show-text="false" />
        </div>
        <div style="width: 80px; white-space: nowrap"
             class="ele-text-secondary">
          <span> ￥{{ yhtjIncomeList?.weixin.amount  }}</span>
        </div>
      </div>
      <div style="margin-top: 30px;"
           class="ele-cell"
           v-if="yhtjIncomeList?.xianjin">
        <div style="width: 50px; white-space: nowrap"
             class="ele-text-secondary">
          <span class="classificationName font-overflow">{{ '现金' }}</span>
        </div>
        <div class="ele-cell-content">

          <el-progress :percentage="yhtjIncomeList?.xianjin.proportion"
                       :stroke-width="26"
                       :text-inside="true"
                       :show-text="false" />
        </div>
        <div style="width: 80px; white-space: nowrap"
             class="ele-text-secondary">
          <span> ￥{{ yhtjIncomeList?.xianjin.amount  }}</span>
        </div>
      </div>
      <div style="margin-top: 30px;"
           class="ele-cell"
           v-if="yhtjIncomeList?.apiPay">
        <div style="width: 50px; white-space: nowrap"
             class="ele-text-secondary">
          <span class="classificationName font-overflow">{{ '支付宝' }}</span>
        </div>
        <div class="ele-cell-content">

          <el-progress :percentage="yhtjIncomeList?.apiPay.proportion"
                       :stroke-width="26"
                       :text-inside="true"
                       :show-text="false" />
        </div>
        <div style="width: 80px; white-space: nowrap"
             class="ele-text-secondary">
          <span> ￥{{ yhtjIncomeList?.apiPay.amount  }}</span>
        </div>
      </div>
      <div style="margin-top: 30px;"
           class="ele-cell"
           v-if="yhtjIncomeList?.yuer">
        <div style="width: 50px; white-space: nowrap"
             class="ele-text-secondary">
          <span class="classificationName font-overflow">{{ '余额' }}</span>
        </div>
        <div class="ele-cell-content">

          <el-progress :percentage="yhtjIncomeList?.yuer.proportion"
                       :stroke-width="26"
                       :text-inside="true"
                       :show-text="false" />
        </div>
        <div style="width: 80px; white-space: nowrap"
             class="ele-text-secondary">
          <span> ￥{{ yhtjIncomeList?.yuer.amount  }}</span>
        </div>
      </div>
      <div style="margin-top: 30px;"
           class="ele-cell"
           v-if="yhtjIncomeList?.pos
  ">
        <div style="width: 50px; white-space: nowrap"
             class="ele-text-secondary">
          <span class="classificationName font-overflow">{{ 'pos' }}</span>
        </div>
        <div class="ele-cell-content">

          <el-progress :percentage="yhtjIncomeList?.pos.proportion"
                       :stroke-width="26"
                       :text-inside="true"
                       :show-text="false" />
        </div>
        <div style="width: 80px; white-space: nowrap"
             class="ele-text-secondary">
          <span> ￥{{ yhtjIncomeList?.pos.amount  }}</span>
        </div>
      </div>

    </div>

  </el-card>

</template>
	  
	  <script>
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { TooltipComponent } from 'echarts/components';
// import VChart from 'vue-echarts';
import 'echarts-wordcloud';
import { wordCloudColor } from 'ele-admin';
import { getWordCloudList } from '@/api/dashboard/analysis';
import { echartsMixin } from '@/utils/echarts-mixin';
import { homePayWayStatistics } from '@/api/headStatistics/index'
use([CanvasRenderer, TooltipComponent]);

export default {
  //   components: { VChart },
  mixins: [echartsMixin(['hotSearchChart'])],
  data () {
    return {
      // 词云图表配置
      yhtjIncomeList: null,
      radio1: '商城消费'
    };
  },
  created () {
    this.init(1);
  },
  methods: {
    change (e) {
      console.log(e)
      if (e == '商城消费') {
        this.init(1)
      } else {
        this.init(2)
      }
    },
    async init (index) {
      const res = await homePayWayStatistics({
        // 1 线上  // 2 线下
        type: index,

      })
      console.log(res)
      this.yhtjIncomeList = res.data
    },
    /* 获取词云数据 */
    getWordCloudData () {
      getWordCloudList()
        .then((data) => {
          this.hotSearchChartOption = {
            tooltip: {
              show: true,
              confine: true,
              borderWidth: 1
            },
            series: [
              {
                type: 'wordCloud',
                width: '100%',
                height: '100%',
                sizeRange: [12, 24],
                gridSize: 6,
                textStyle: {
                  color: wordCloudColor
                },
                emphasis: {
                  textStyle: {
                    shadowBlur: 8,
                    shadowColor: 'rgba(0, 0, 0, .15)'
                  }
                },
                data: data
              }
            ]
          };
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.line {
  width: 4px;
  height: 25px;
  margin-right: 5px;
  background: rgb(90, 158, 247);
}
.fourPalaceGrid {
  display: flex;
  flex-wrap: wrap;
  .singlePalaceGrid {
    .icon {
      width: 52px;
      height: 52px;
    }
    flex: 33.3%; /*0 不放大  0 不收缩  子项大小为父容器25%*/

    height: 93px;

    align-items: center;
    box-sizing: border-box;

    // border: 1px solid #f5f6fb;
    .accumulateNum {
      height: 62px;
      display: flex;
      flex-direction: column;
      justify-content: space-evenly;
      .Num {
        color: #1e6ceb;
        font-size: 20px;
      }
    }
  }
  .icon {
    width: 32px;
    height: 32px;
  }
}
</style>
	  